<template>
  <div class="wrap_item">
    <div class="img_zhezhao">
      <img :src="baseurl + item.albumInfo.cover" class="wrap_img">
    </div>
    <div class="wrap_img_text">
      <img src="@/assets/icons/play_icon.png" class="wrap_icon">
      <div class="wrap_img_text1">
        {{ playCount }}
      </div>
    </div>
    <div class="text-container">
      <p class="wrap_text ellipsis-text">{{ item.albumInfo.title }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { createApp, ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const $router=useRouter()

const baseurl = 'https://imagev2.xmcdn.com/'
const props = defineProps<{
item:any
}>()

const formatNumber = (number:number) => {
if (number >= 100000000) {
  return (number / 100000000).toFixed(2) + ' 亿';
} else if (number >= 10000) {
  return (number / 10000).toFixed(2) + ' 万';
} else {
  return number.toString();
}
}
const playCount = computed(()=>{
let playCount = formatNumber(props.item.statCountInfo.playCount)
return playCount
})


</script> 

<style scoped lang="less">
.wrap_item{
width: 103px;
height: 173px;
}
.img_zhezhao{
position: relative;
float: left;
top: 10px;
width: 103px;
height: 103px;
border-radius: 8px;
display: block;
background-color: #050000;
z-index: 20;

}
.wrap_img{
position: absolute;
width: 103px;
height: 103px;
border-radius: 6px;
opacity: 0.9;
}
.wrap_icon{
width: 15px;
height: 15px;
position: relative;
left: -38px;
}
.wrap_img_text{
position: relative;
top: -12px;
width: 103px;
height: 28px;
font-size: 12px;
text-align: center;
line-height: 28px;
color: #fff;
z-index: 100;
}
.wrap_img_text1{
position: relative;
top: -30px;
color: #fdfbfb;
}
.wrap_text{
width: 103px;
// height: 53px;
line-height: 1.3em;
font-size: 13px;
color: #333;
margin-top: 90px;
}
.text-container p{
width: 100px; /* 调整容器宽度 */
height: 34px;
overflow: hidden;
}
.ellipsis-text {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2; /* 控制显示的行数 */
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
</style>